<template>
  <div class="dashboard-container">
    <!-- github角标 -->
    <!--<github-corner class="github-corner" />-->

    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                {{ context }}
              </p>
            </div>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center justify-around">
            <el-statistic
              v-for="item in statisticData"
              :key="item.key"
              :value="item.value"
              style="text-align: center"
            >
              <template #title>
                <div class="flex items-center">
                  <svg-icon :icon-class="item.iconClass" size="20px" />
                  <span class="text-[16px] ml-1">{{ item.title }}</span>
                </div>
              </template>
              <template v-if="item.suffix" #suffix>/100</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据卡片 -->
    <el-row :gutter="20" mt-3>
      <el-col :span="9">
        <el-card>
          <p>快捷菜单<i-ep-setting size="4" ml-1 /></p>
          <div class="menu_btn">
            <el-link href="#/permission/users" :underline="false">
              <el-avatar shape="square" icon="UserFilled" class="purple" />
              <span>账号管理</span>
            </el-link>
          </div>
          <div class="menu_btn">
            <el-link href="#/permission/roles" :underline="false">
              <el-avatar shape="square" icon="Stamp" class="blue" />
              <span>角色管理</span>
            </el-link>
          </div>
          <div class="menu_btn">
            <el-link href="#/system/config" :underline="false">
              <el-avatar shape="square" icon="Setting" class="red" />
              <span>系统设置</span>
            </el-link>
          </div>
          <div class="menu_btn">
            <el-link href="#/system/log/loginLog" :underline="false">
              <el-avatar shape="square" icon="Unlock" class="yellow" />
              <span>访问日志</span>
            </el-link>
          </div>
          <div class="menu_btn">
            <el-link href="#/system/dict/data" :underline="false">
              <el-avatar shape="square" icon="Collection" class="green" />
              <span>字典管理</span>
            </el-link>
          </div>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card />
      </el-col>
    </el-row>
    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-3">
      <el-col
        :xs="24"
        :sm="12"
        :lg="8"
        class="mb-2"
        v-for="item in chartData"
        :key="item"
      />
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import User from "@/views/member/user.vue";

const userStore = useUserStore();
const date: Date = new Date();

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 2 && hours < 5) {
    return "凌晨了，该休息了！注意身体！😪";
  } else if (hours >= 6 && hours < 8) {
    return "早晨，开始全新的一天！😊";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.nickname + "！开始摸鱼的一天！😄";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.nickname + "！快要下班了！再坚持下💪";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.nickname + "！请点击右上角关闭！👉";
  } else {
    return "深夜了，为什么还在打开该系统?💢";
  }
});

const context = computed(() => {
  const contexts: string[] = [
    "奋斗不止，进步无止境，让人生在追求中焕发光彩。",
    "砥砺前行不畏惧，奋发向前不停息。成就自己，铸就辉煌人生。",
    "梦想如星辰，点亮黑暗，照亮前行的路。",
    "驾驭命运的舵是。不抱有一丝幻想，不放弃一点机会，不停止一日努力。",
    "积极进取，永不言败，步履踏实，铸就辉煌。",
    "奋斗不止，勇往直前，让成功成为必然。",
    "梦想是人生的太阳，它指引着前行的方向，让我们无惧困难，勇往直前。",
  ];

  return contexts[Math.floor(Math.random() * contexts.length)];
});

const duration = 5000;

// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
dauCount.value = 2000;

// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
orderCount.value = 2000;

// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "message",
    title: "消息",
    key: "message",
  },
  {
    value: 50,
    iconClass: "todolist",
    title: "待办",
    suffix: "/100",
    key: "upcoming",
  },
  {
    value: 10,
    iconClass: "project",
    title: "项目",
    key: "project",
  },
]);

interface CardProp {
  title: string;
  tagType: EpPropMergeType<
    StringConstructor,
    "primary" | "success" | "info" | "warning" | "danger",
    unknown
  >;
  tagText: string;
  count: any;
  dataDesc: string;
  iconClass: string;
}
// 卡片数量
const cardData = ref<CardProp[]>([
  {
    title: "访客数",
    tagType: "success",
    tagText: "日",
    count: visitCountOutput,
    dataDesc: "总访客数",
    iconClass: "visit",
  },
  {
    title: "IP数",
    tagType: "success",
    tagText: "日",
    count: dauCountOutput,
    dataDesc: "总IP数",
    iconClass: "ip",
  },
  {
    title: "销售额",
    tagType: "primary",
    tagText: "月",
    count: amountOutput,
    dataDesc: "总IP数",
    iconClass: "money",
  },
  {
    title: "订单量",
    tagType: "danger",
    tagText: "季",
    count: orderCountOutput,
    dataDesc: "总订单量",
    iconClass: "order",
  },
]);
// 图表数据
const chartData = ref(["BarChart", "PieChart", "RadarChart"]);
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
  .box-card {
    text-align: center;
    font-size: 12px;
  }
  .menu_btn {
    display: inline-block;
    font-size: 14px;
    margin-left: 0px;
    padding: 12px 55px 12px 12px;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .purple {
    background-color: rgb(179, 127, 235);
  }
  .blue {
    background: #409eff;
  }
  .green {
    background-color: #67c23a;
  }
  .red {
    background-color: #f56c6c;
  }
  .yellow {
    background-color: #e6a23c;
  }
  .menu_btn span {
    margin-left: 8px;
  }
  .menu_btn:hover {
    background-color: #f2f2f2;
  }
  .el-link:hover {
    color: #000000;
  }
}
</style>
